<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BMI Calculator</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background-color: #f4f4f4; /* 背景颜色 */
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 设置为全屏高度 */
    }


    .container {
      background-color: white; /* 容器背景 */
      border-radius: 15px; /* 圆角效果 */
      padding: 30px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 阴影效果 */
      max-width: 400px; /* 最大宽度 */
      width: 100%; /* 满宽度 */
      text-align: center; /* 文本居中 */
    }


    h1 {
      color: #007bff; /* 主要标题颜色 */
      margin-bottom: 10px;
    }


    h2 {
      color: #6c757d; /* 次级标题颜色 */
      margin-bottom: 20px;
    }


    label {
      display: block; /* 标签块状显示 */
      margin-bottom: 15px; /* 标签之间的间距 */
    }


    input[type="number"] {
      width: calc(100% - 20px); /* 减去内边距 */
      padding: 10px; /* 内边距 */
      margin-top: 5px; /* 输入框与标签之间的距离 */
      border: 1px solid #ced4da; /* 边框样式 */
      border-radius: 5px; /* 圆角 */
      font-size: 16px; /* 字体大小 */
    }


    button {
      background-color: #007bff; /* 按钮背景颜色 */
      color: white; /* 按钮文字颜色 */
      border: none; /* 无边框 */
      padding: 10px 15px; /* 内边距 */
      border-radius: 5px; /* 圆角效果 */
      cursor: pointer; /* 光标样式 */
      font-size: 16px; /* 字体大小 */
      margin: 10px 0; /* 按钮之间的间距 */
      transition: background-color 0.3s; /* 背景颜色过渡效果 */
      width: 100%; /* 按钮宽度 */
    }


    button:hover {
      background-color: #0056b3; /* 悬停时的颜色 */
    }


    button:active {
      background-color: #003d80; /* 点击时的颜色 */
    }


    p {
      margin: 10px 0; /* 段落间距 */
    }


    #result, #description {
      font-weight: bold; /* 文字加粗 */
      margin-top: 15px; /* 与其他元素的间距 */
    }


    #result {
      color: #28a745; /* 结果文本颜色 */
    }


    #description {
      color: #dc3545; /* 错误消息颜色 */
    }
  </style>
</head>


<body>
  <div class="container">
    <h1>BMI指数计算器</h1>
    <h2>体质体重指数</h2>
    <label for="weight">体重: <input type="number" id="weight" placeholder="公斤(KG)"></label>
    <label for="height">身高: <input type="number" id="height" placeholder="厘米(CM)"></label>
    <button onclick="calculateBMI()">开始计算</button>
    <button onclick="resetFields()">重新计算</button>
    <p id="result"></p>
    <p id="description"></p>
  </div>


  <script>
    function calculateBMI() {
        var weight = parseFloat(document.getElementById('weight').value);
        var height = parseFloat(document.getElementById('height').value); // 直接获取厘米
        var errorMessage = "";


        // 输入验证
        if (isNaN(weight) || weight <= 25 || weight >= 150) {
            errorMessage += "体重必须是一个在25到150公斤之间的正数。<br>";
        }
        if (isNaN(height) || height <= 110 || height >= 230) {
            errorMessage += "身高必须是一个在110到230厘米之间的正数。<br>";
        }


        if (errorMessage !== "") {
            document.getElementById('result').innerHTML = "";
            document.getElementById('description').innerHTML = errorMessage; // 显示错误信息
            return; // 如果有错误，退出函数
        } else {
            document.getElementById('description').innerHTML = ""; // 清空错误信息
        }
        
        // 将身高转换为米
        var heightInMeters = height / 100;


        // 计算BMI
        var bmi = weight / (heightInMeters * heightInMeters);
        document.getElementById('result').innerHTML = "你的BMI值是: " + bmi.toFixed(2);


        // 根据BMI值给出描述
        var description = "";
        if (bmi < 18.5) {
            description = "太瘦了,跟个细狗一样！";
        } else if (bmi >= 18.5 && bmi < 24.9) {
            description = "nice!继续保持";
        } else if (bmi >= 25 && bmi < 29.9) {
            description = "超重了,该跟花小龙一起自律了！！";
        } else {
            description = "超级肥胖,过年能吃杀猪菜了！！！";
        }
        document.getElementById('description').innerHTML += description; // 显示BMI描述
    }
</script>
<h6><span>&copy; 2024 @小李不讲理</span></h6>
</body>
</html>